<template>
	<view class="i-notice" :style="[viewStyle]" @tap="handleTap">
		<view class="notice-body e-flex" :class="[layoutClass]" :style="[layoutStyle]">
			<template v-if="option.iconType == 1">
				<text class="iconfont icon-dianpu f-70" v-if="option.systemIconType == 0"></text>
				<text class="iconfont c-primary" :class="icon" v-if="option.systemIconType !=1"></text>
				<text class="notice-icon c-primary e-font-26" v-else>{{$t('layout.公告')}}</text>
			</template>
			<load-image mode="widthFix" :size="['80rpx']"  :src="option.iconUrl" v-else></load-image>
			<view class="line" :style="[{ backgroundColor: option.lineBackgroundColor }]"></view>
			<view class="e-flex-1 e-rela" :style="[{ color: option.textColor }]">
				<swiper class="swiper" vertical autoplay circular :interval="3000" :current="current">
					<block v-for="item in noticeList" :key="item.noticeId">
						<swiper-item class="swiperitem" @tap="handleTap(item)">
							{{item.noticeTitle}}
						</swiper-item>
					</block>
				</swiper>
				<view class="swiper-mack e-abso">

				</view>
			</view>
		</view>
		<!-- 公告弹窗 -->
		<e-overlay :show="show">
			<view class="overlay-body e-flex-xy-center">
				<view class="overlay-content e-p-b-40">
					<image class="overlay-content-image" :src="$staticPath('Rectangle.png')" mode=""></image>
					<view class="overlay-content-header e-flex-xy-center">
						<text class="c-333 e-font-36 fw-600">{{$t('common.系统公告')}}</text>
					</view>
					<view class="e-p-l-40 e-p-r-40 e-p-t-8 e-m-b-30 overlay-content-cont c-333 e-font-28" @longpress="$copy(option.contentText)">
						{{option.contentText}}
					</view>
					<view class="e-flex-xy-center" @tap.stop="show = false">
						<view class="overlay-btn e-flex-xy-center" :style="{background:AppSkin.primary}">
							<text class="e-font-32 c-white">{{$t('classify.我知道了')}}</text>
						</view>
					</view>
				</view>
			</view>
		</e-overlay>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed } from 'vue'
	import type { pageLink } from './type'
	import { getNoticeList } from '@/common/request/api'
	import type { SystemNoticeItem } from '@/common/request/api'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import { useLayoutCompoments } from './hooks'

	const props = withDefaults(defineProps<{
		option : {
			styleType : 0 | 1 | 2
			iconType : 1 | 2
			systemIconType : 0 | 1 | 2
			iconUrl : string
			contentType : 1,
			contentText : string
			contentClickType : 1,
			link : pageLink,
			backgroundColor : string
			bodyBackgroundColor : string
			lineBackgroundColor : string
			textColor : string
			paddingTop : number
			paddingBottom : number
			paddingX : number
			radiusTop : number
			radiusBottom : number
		}
	}>(), {
		option: () => ({
			styleType: 0,
			iconType: 1,
			systemIconType: 0,
			iconUrl: '',
			contentType: 1,
			contentText: '',
			contentClickType: 1,
			link: {
				linkName: '',
				pageUrl: '',
				linkUrl: ''
			},
			backgroundColor: 'rgba(245, 246, 249, 1)',
			bodyBackgroundColor: 'rgba(255, 255, 255, 1)',
			lineBackgroundColor: 'rgba(173, 175, 179, 1)',
			textColor: 'rgba(48, 49, 51, 1)',
			paddingTop: 12,
			paddingBottom: 12,
			paddingX: 10,
			radiusTop: 0,
			radiusBottom: 0,
		})
	})

	const ctx = useCurrentInstance()
	
	const show = ref(false)
	const current = ref(0)

	const { bodyClass, bodyBoxStyle: layoutStyle, jumpLink } = useLayoutCompoments(ctx, props.option)

	const noticeList = ref<SystemNoticeItem[]>([])

	const icon = computed(() => {
		return props.option.systemIconType == 0 ? 'icon-tongzhi f-70' : 'icon-gonggao-laba'
	})

	const layoutClass = computed(() => {
		return [bodyClass.value, props.option.textAlign == 'center' ? 'text-center' : '']
	})

	const handleTap = (data) => {
		console.log(props.option.contentType,noticeList.value,current.value)
		if (props.option.contentType == 1) {
			// 系统公告数据，跳转系统公告页面
			ctx.$goTo('/pages/public/msg/sys-msg-detail',  {id:noticeList.value[current.value].noticeId, type: 1})
		} else {
			if (props.option.contentClickType == 1) {
				// 弹出公告内容
				show.value = true
			} else {
				// 跳转自定义链接
				jumpLink(props.option.link)
			}

		}

	}

	if (props.option.contentType == 1) {
		getNoticeList().then(res => {
			noticeList.value = res.rows
		})
	} else {
		noticeList.value.push({
			noticeId: 1,
			noticeTitle: props.option.contentText
		})
	}
</script>

<style scoped lang="scss">
	@import '@/components/list/css/layoutCommon.scss';

	.f-70 {
		font-size: 70rpx;
	}

	.notice-body {
		padding: 16rpx 20rpx;

		text {
			font-size: 38rpx;
		}

		.notice-icon {
			border: 2rpx solid var(--color-primary);
			padding: 0 4rpx;
		}

		.line {
			width: 2rpx;
			height: 36rpx;
			margin: 0 14rpx;
		}

		.swiper {
			height: 40rpx;
			line-height: 40rpx;

			.swiperitem {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 26rpx;
			}
		}

		.swiper-mack {
			width: 100%;
			height: 100%;
			z-index: $z-index-most;
			left: 0;
			top: 0;
		}
	}
	.overlay-body {
		width:100vw;
		height: 100vh;
		.overlay-content {
			width: 570rpx;
			min-height: 546rpx;
			background: #FFFFFF;
			border-radius: 0 0 40rpx 40rpx;
			position: relative;
			&-image,&-header {
				width: 570rpx;
				height: 110rpx;
				position: absolute;
				top: -110rpx;
			}
			&-cont{
				min-height: 378rpx;
				max-height: 600rpx;
				overflow-y: auto;
			}
		}
	}
	.overlay-btn {
		width: 490rpx;
		height: 90rpx;
		border-radius: 46rpx;
	}
</style>